<template>
  <el-row type="flex" justify="space-between">
      <el-row type="flex">
          <span>变种属性：</span>
          <template v-if="!custom.isEdit">
              <span>{{ label }}</span><i class="el-icon-edit" @click="startEdit"></i>
          </template>
          <template v-else>
              <el-input v-model="custom.label_edit" @click="cancelEdit" placeholder="属性名" style="width: 100px"></el-input>
              <i class="el-icon-s-order" @click="saveLabel"></i>
              <i class="el-icon-close" @click="cancelEdit"></i>
          </template>
      </el-row>
      <el-button type="primary" icon="el-icon-plus" @click="removeAttr">移除</el-button>
  </el-row>
</template>

<script>
export default {
  props: {
    value: String
  },
  data() {
    return {
      custom: {
        isEdit: false,
        label_edit: ''
      }
    }
  },
  computed: {
    label: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    saveLabel() {
      this.label = this.custom.label_edit
      this.endEdit()
    },
    removeAttr() {
      this.$emit('removeAttr', this.custom)
    },
    startEdit() {
      this.custom.isEdit = true
      this.custom.label_edit = this.label
      this.$nextTick(() => {
        this.$refs.label_edit.$el.firstChild.focus()
      })
    },
    cancelEdit() {
      this.custom.label_edit = this.label
      this.endEdit()
    },
    endEdit() {
      this.custom.isEdit = false
    }
  }
}
</script>

<style>

</style>